<template>
  <div class="dashboard">
    <!-- 项目源码地址 -->
    <el-card class="box-card compact">
      <h2>本项目源码地址：</h2>
      <el-divider></el-divider>
      <p>前端：<el-link href="https://gitee.com/yqryqn/xsap_vue_3" target="_blank">https://gitee.com/yqryqn/xsap_vue_3</el-link></p>
      <p>后端：<el-link href="https://gitee.com/yqryqn/xsap_admin_3" target="_blank">https://gitee.com/yqryqn/xsap_admin_3</el-link></p>
    </el-card>

    <!-- 小组介绍部分 -->
    <el-card class="box-card compact">
      <h2>开发者介绍</h2>
      <el-divider></el-divider>
      <el-table :data="teamMembers" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="giteeId" label="Gitee账户ID"></el-table-column>
      </el-table>
    </el-card>

    <!-- 图片轮播部分 -->
    <el-card class="box-card compact slideshow">
      <div
        v-for="(image, index) in images"
        :key="index"
        :class="['slide', { active: currentSlide === index }]"
      >
        <img :src="image" alt="Slideshow Image" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const teamMembers = ref([
  { name: '高俊杰', giteeId: '@yqryqn' },
  { name: '夏沐阳', giteeId: '@RyougiFujino' },
  { name: '陈乐天', giteeId: '@cfp184' },
  { name: '杨瑞民', giteeId: '@damin798' }
]);

const images = ref([
  '../src/assets/imgs/苏州1.jpg',
  '../src/assets/imgs/苏州2.webp',
  '../src/assets/imgs/苏州3.jpg',
  '../src/assets/imgs/苏州4.jpg',
  '../src/assets/imgs/苏州5.jpg',
  '../src/assets/imgs/苏州6.jpg',
]);

const currentSlide = ref(0);
let slideInterval;

const startSlideshow = () => {
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % images.value.length;
  }, 2300);
};

onMounted(() => {
  startSlideshow();
});

onUnmounted(() => {
  clearInterval(slideInterval);
});
</script>

<style scoped>
.dashboard {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-items: center;
}

.el-card.compact {
  padding: 0px;
  margin-bottom: 10px;
}

.slideshow {
  position: relative;
  padding: 0px;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: 0;
  margin: 0 auto;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片会完全填充容器，保持比例不变 */
  display: block;
  margin: 0;
  padding: 0;
}

.el-divider {
  margin: 10px 0;
}
</style>
